.city {
  width: 1519.2px;
  height: 1040px;
  transform: translateY(250px);
}
.city ul li:hover .city__list-char {
  opacity: 1;
}
.city__list {
  overflow: hidden;
}
.city__list-item::before {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
}
.city__list-item {
  position: relative;
  width: 100%;
  height: 260px;
  background: center no-repeat;
  background-size: 100% auto;
  cursor: pointer;
  overflow: hidden;
}
.city__list-item p,
.home .city__list-item a {
  display: inline-block;
  position: relative;
  top: -400px;
  z-index: 3;
  font-size: 36px;
  color: #fff;
  line-height: 260px;
  width: 100%;
  height: 260px;
  background-size: 132px;
  text-align: center;
  text-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  margin: 0 !important;
  overflow: hidden;
}
.city_imgs {
  display: inline-block;
  position: relative;
  top: -199px;
  left: 690px;
  z-index: 3;
  font-size: 36px;
  color: #fff;
  line-height: 260px;
  text-align: center;
  text-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  margin: 0 !important;
  overflow: hidden;
}
.city_img {
  transition: all ease 0.7s;
}
.city__list-item:hover .city_img {
  transform: scale(1.1);
}
.city__list-item p::before {
  position: absolute;
  bottom: 91px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  content: "";
  width: 210px;
  height: 10px;
  background: url(C:/Users/Administrator/Desktop/原神官网制作/image/琴_1s.png)
    center no-repeat;
  background-size: 210px 10px;
  opacity: 0;
}
.city__list-item .city__list-char {
  position: absolute;
  z-index: 999;
  top: 0;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 260px;
  background-repeat: no-repeat;
  background-position: calc(50% + 360px) 50%;
  background-size: 960px 260px;
  opacity: 0;
  transition: all 0.2s 0s ease-in;
  border: #fff solid 6px;
  box-sizing: border-box;
}
.city__list-item_last::before {
  position: absolute;
  z-index: 2;
  top: 780px;
  left: 0;
  display: block;
  content: "";
  width: 100%;
  height: 260px;
  background: rgba(0, 0, 0, 0.4);
}
.city__list-item_last a p {
  display: inline-block;
  position: relative;
  top: -265px;
  z-index: 3;
  font-size: 36px;
  color: #5e5f63;
  line-height: 260px;
  width: 100%;
  height: 260px;
  text-align: center;
  text-shadow: 0 2px 6px rgb(0 0 0 / 20%);
  margin: 0 !important;
  overflow: hidden;
}
